<template>
  <div class="contextualModel">
    <div class="boxContent">
      <template v-for="i in 4">
        <div class="boxItem" :key="i">
          <div class="top">
            <div class="title">{{ title }}：上午（禁用中）</div>
            <div class="btnGroup">
              <el-button size="mini">操作</el-button>
              <el-button size="mini">详情</el-button>
            </div>
          </div>
          <div class="statusBox">
            <div class="statusItem" v-for="item in 4" :key="item">
              <img :src="icon" alt="加载失败" />
              <div class="text">智能照明</div>
            </div>
          </div>
          <div class="footer">
            <el-button size="mini" type="info">启用</el-button>
            <div class="dateTime">上次执行时间：2021-07-30 09:10:21</div>
          </div>
        </div>
      </template>
    </div>

    <div class="pagination">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page.sync="pageInfo.currentPage"
        :page-size="pageInfo.pageSize"
        layout="total, prev, pager, next"
        :total="10"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      icon: require("@/assets/images/strategyControl_0.png"),
      pageInfo: {
        currentPage: 1,
        pageSize: 10
      }
    };
  },
  props: {
    title: {
      type: String,
      required: true
    },
    data:{
      type:Object,
      required: true
    }
  },
  methods: {
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
};
</script>

<style lang="scss" scoped>
@mixin flexLayout {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.contextualModel {
  margin-right: 10px;
  margin-top: 10px;
  background-color: #fff;
  border-radius: 5px;
  padding: 10px 30px;
  padding-bottom: 40px;
  min-height: 62vh;
  position: relative;

  .boxContent {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    .boxItem {
      width: calc((100% / 3) - 76px);
      border: 1px solid rgba(187, 187, 187, 100);
      padding: 18px 21px;
      margin-right: 38px;
      margin-bottom: 19px;
      border-radius: 3px;
      &:nth-child(3n) {
        margin-right: 0;
      }
      .top {
        @include flexLayout;
        .title {
          font-weight: 550;
          color: rgba(16, 16, 16, 100);
          font-size: 17px;
          font-family: SourceHanSansSC-bold;
        }
        /deep/ .el-button--mini,
        .el-button--mini.is-round {
          padding: 4px 15px;
        }
      }
      .statusBox {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-top: 16px;
        margin-bottom: 10px;
        .statusItem {
          margin-right: 17px;
          width: 93px;
          height: 87px;
          line-height: 20px;
          border-radius: 10px 10px 10px 10px;
          text-align: center;
          border: 1px solid rgba(187, 187, 187, 100);
          box-sizing: border-box;
          font-family: SourceHanSansSC-regular;
          font-size: 14px;

          &:nth-child(4n) {
            margin-right: 0;
          }
          img {
            margin-top: 8px;
            width: 38px;
            height: 45px;
          }
        }
      }
      .footer {
        @include flexLayout;

        /deep/ .el-button {
          padding: 7px 40px;
        }
        .dateTime {
          color: rgba(96, 96, 96, 100);
          font-family: SourceHanSansSC-regular;
        }
      }
    }
  }

  .pagination {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
  }
}
/deep/ .el-button--info {
  color: #101010;
  background-color: #dbdbdb;
  border-color: #dbdbdb;
}
</style>
